
<template>
    <el-aside class="el-aside">
        <el-menu :default-active="items[0].name" class="el-menu-vertical-demo"  :router="true"
             unique-opened background-color="#334155" text-color="#fffbeb" active-text-color="#fcd34d">
            <template v-for="(item,k) in items" :key="k">
                <el-menu-item v-if="!item.children" :index=item.name  :route="{name:item.name}">
                        <el-icon>
                            <component :is="item.meta.icon"></component>
                        </el-icon>
                        <span>{{ item.meta.title}}</span>
                    </el-menu-item>
                <el-sub-menu :index=item.name v-else>
                    <template #title>
                    <el-icon>
                            <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                    </template>
                    <el-menu-item v-for="ele in item.children" :index="ele.name" :key="ele.name" :route="{name:ele.name}">
                        <el-icon>
                            <component :is="ele.meta.icon"></component>
                        </el-icon>
                        <span>{{ ele.meta.title }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </el-aside>
</template>
<script setup>
import {Compass,Location, Setting, Document} from "@element-plus/icons-vue"
import {reactive, ref, computed, onMounted, toRefs} from "vue";
import {nav_routes} from "@/router/index.js";

// const items = reactive([
//     {title: '首页', icon: Compass, name: 'home'},
//     {title: '监测后台', icon: Location, children: [
//             {title: '监测1', icon: Location, name: 'echarts1'},
//         ]},
//     {title: '用户管理', icon: Setting, children: [
//             {title: '用户1', icon: Setting, name: 'user1'},
//             {title: '用户2', icon: Setting, name: 'user2'}]},
//     {title: '关于', icon: Document, name: 'about'},
// ])
const items = nav_routes[0].children
</script>
<style>
.el-aside{
    background-color: #334155;
    width: 210px;
    height: 100vh;
    overflow-y: auto;
}
.el-header {
  padding: 0;
}
</style>